﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>select封装</title>

    <link href="/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap-3.3.7/css/bootstrap-select.min.css" rel="stylesheet" />

    <script src="/Scripts/jquery-3.3.1.min.js"></script>
    <script src="/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="/Scripts/bootstrap-3.3.7/js/bootstrap-select-extend.js?v=0.0.0.1"></script> 
    <!--<script src="/Scripts/bootstrap-3.3.7/js/bootstrap-select.min.js"></script>-->
    <script src="/Scripts/bootstrap-3.3.7/js/i18n/defaults-zh_CN.min.js"></script>
    <script src="/Scripts/vue.min.js"></script>

    <script src="/Scripts/select.js?v=0.0.0.7"></script>
</head>
<body>
    <form id="myform">
        <div class="container" style="margin:50px auto;">
            <div class="row">
                <div class="col-sm-8 col-md-8">
                    <select class="form-control selectpicker" data-live-search="true" data-live-search-placeholder="搜索" data-actions-box="true" multiple>
                        <!--onchange="selchange(this)"-->
                        <optgroup v-for="c in list" label="{{c.text}}">
                            <option value="p_{{c.id}}" label="parent">{{c.text}}【{{c.helpcode}}】</option>
                            <option v-for="item in c.list" label="son" value="{{item.id}}">{{item.text}}【{{item.helpcode}}】</option>
                        </optgroup>
                    </select>
                </div>
                <div class="col-sm-4 col-md-4">
                    <button class="btn btn-default">确定</button>
                </div>
            </div>
        </div>

        <div class="container" style="margin:50px auto;">
            <div class="row">
                <div class="col-sm-8 col-md-8">
                    <select class="form-control selectpicker" data-live-search="true" data-live-search-placeholder="搜索" data-actions-box="true" multiple>
                        <!--onchange="selchange(this)"-->
                        <optgroup v-for="c in list1" label="{{c.text}}">
                            <option value="p_{{c.id}}" label="parent">{{c.text}}【{{c.helpcode}}】</option>
                            <option v-for="item in c.list" label="son" value="{{item.id}}">{{item.text}}【{{item.helpcode}}】</option>
                        </optgroup>
                    </select>
                </div>
                <div class="col-sm-4 col-md-4">
                    <button class="btn btn-default">确定</button>
                </div>
            </div>
        </div>

        <div class="container" style="margin:50px auto;">
            <div class="row">
                <div class="col-sm-8 col-md-8">
                    <select class="form-control selectpicker" data-live-search="true" data-live-search-placeholder="搜索" data-actions-box="true">
                        <!--onchange="selchange(this)"-->
                        <optgroup v-for="c in list" label="{{c.text}}">
                            <option v-for="item in c.list" label="son" value="{{item.id}}">{{item.text}}【{{item.helpcode}}】</option>
                        </optgroup>
                    </select>
                </div>
                <div class="col-sm-4 col-md-4">
                    <button class="btn btn-default">确定</button>
                </div>
            </div>
        </div>


    </form>
    <br />
</body>
</html>

<script>
    var vue = new Vue({
        el: "#myform",
        data: {
            list: [],
            list1: []
        },
        methods: {
            initdata: function () {
                vue.list = JSON.parse(sellist);
                vue.list1 = JSON.parse(sellist1);
            }
        }
    });
    vue.initdata(); 

     
    //$('select').on('changed.bs.select', function (e) {
    //    selchanged(this);
    //}); 
     
</script>

